<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>user</title>
  <link href="/ast/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<table class="layui-hide" id="ID-table-demo-editmodes"></table>
<button class="layui-btn layui-btn-sm new-card-btn">新增用户</button>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<script src="/ast/layui/layui.js"></script>
<script>
layui.use(function(){
  var $ = layui.$;
  var table = layui.table;
  var form = layui.form;
  var dropdown = layui.dropdown;
  var laydate = layui.laydate;
  var layer = layui.layer;
  var colorpicker = layui.colorpicker;
  var util = layui.util;
  var loadingz = layer.load(2);
  table.render({
    elem: '#ID-table-demo-editmodes',
    url: 'ht/getuser.php', 
    page: true,
    css: [ 
      '.layui-table-cell{height: 50px; line-height: 40px;}',
      '.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}',
      '.layui-table-cell select{height: 36px; padding: 0 5px;}'
    ].join(''),
    cols: [[ 
      {field: 'id', width:80, title: 'ID', fixed: 'left'},
    {field: 'username', width:120, title: '用户名',  templet: '#TPL-select-demo'},
      {field: 'password', title: '用户密码', width:120,minWidth: 150, templet: '#TPL-select-demo'},
      {field: 'mail', width:140,title: '用户邮箱',  templet: '#TPL-select-demo'},
      {field: 'ip', title: '用户IP', width:140, templet: '#TPL-select-demo'},
      {field: 'vip', title: '用户VIP时间',edit:"textarea"},
      {title: '操作', width: 120, align: 'center', toolbar: '#barDemo'}
    ]],
    done: function(res, curr, count){
      var options = this;
      res.data.forEach(function(row, index){
      row._originalData = JSON.parse(JSON.stringify(row));
    });
      table.getRowData = function(tableId, elem){
        var index = $(elem).closest('tr').data('index');
        return table.cache[tableId][index] || {};
      };
      var showData = function(data) {
        return layer.msg('当前行最新数据：<br>'+ util.escape(JSON.stringify(data)), {
          offset: '16px',
          anim: 'slideDown'
        });
      };
      
layer.close(loadingz);
      form.on('select(select-demo)', function(obj){
        var value = obj.value; 
        var data = table.getRowData(options.id, obj.elem);
        data['oldname'] = data._originalData.username;
        data.zhj = value;
        fetch('ht/xgcard.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json; charset=utf-8'
          },
          body: JSON.stringify(data)
        })
        .then(response => response.json())
.then(data => {
    if(data.code === 0){
        layer.msg('修改成功');
    }
        })
      });
     
      $('.new-card-btn').on('click', function(){
        layui.use(['element'], function(){
  var element = layui.element;
    layer.open({
      type: 2,
      title: 'New users',
      shadeClose: true,
      shade: 0.8,
      area: ['580px', '60%'],
      shadeClose: false,
      content: 'newuser.php' 
    });   
  });
});
      table.on('tool(ID-table-demo-editmodes)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
      layer.confirm('确定要删除这条记录吗？', function(index){
        obj.del();
        layer.close(index);
        $.ajax({
        type: 'POST',
        url: 'ht/deluser.php',
        data: {name: data.id},
        success: function(res){
               layer.msg('删除成功');
           }
        });
      });
    }
  });
  
      table.on('edit(ID-table-demo-editmodes)', function(obj){
        var value = obj.value 
        var data = obj.data 
        data['oldname'] = data._originalData.username;
        var field = obj.field; 
        var update = {};
        update[field] = value;
        obj.update(update);
        fetch('ht/xgcard.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json; charset=utf-8'
          },
          body: JSON.stringify(data)
        })
        .then(response => response.json())
.then(data => {
    if(data.code === 0){
        layer.msg('修改成功');
    }
        })
      });
    }
  });
});


</script>

</body>
</html>